<template>
  <el-calendar ref="calendar" style="padding: 50px" @input="handleClick">
    <template #header="{ date }">
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">
          上一年
        </el-button>
        <el-button size="small" @click="selectDate('prev-month')">
          上个月
        </el-button>
        <el-button size="small" @click="selectDate('today')">当天</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          下个月
        </el-button>
        <el-button size="small" @click="selectDate('next-year')">
          下一年
        </el-button>
      </el-button-group>
    </template>
    <template #dateCell="{ data }">
      <div class="calendar-day" @click="handleClick(data)">
        {{ data.day.split('-')[2] }}
      </div>
    </template>
  </el-calendar>

  <el-dialog v-model="dialogVisible" :title="selectedDate">
    <el-table :data="userList">
      <el-table-column label="账号" prop="username"></el-table-column>
      <el-table-column label="账号ID" prop="userId"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import type {CalendarDateType, CalendarInstance} from 'element-plus'
import {getUserList} from "@/api/system/sysUser";
import {message} from "@/utils/ElmessasgeUtils";

const calendar = ref<CalendarInstance>()
const dialogVisible = ref(false)
const selectedDate = ref('')

const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const userList = ref([])

function handleClick(dateStr: any) {

  const date = new Date(dateStr);

  const isoString = date.toISOString(); // "2025-07-15T10:11:57.000Z" (UTC 时间)
  const formattedDate = isoString.slice(0, 10).replace(/-/g, '');
  console.log(formattedDate); // 输出: "20250715"
  selectedDate.value = formattedDate
  dialogVisible.value = true

  getUserList(formattedDate).then(res => {
    console.log(res.data.data)
    if (res.data.code === 200) {
      userList.value = res.data.data
      console.log(userList.value)
    } else {
      message("查询日活失败", 'error')
    }

  })
}
</script>

<style scoped>
.calendar-day {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
